<template>
    <div id="screen" class="screen">
      <i class="el-icon-full-screen" @click="screen()"> </i>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        fullscreen: false,
      };
    },
    mounted() {
      window.addEventListener("resize", () => {
        if (!this.isFullScreen()) {
          // 非全屏状态
          this.fullscreen = false;
        }
      });
    },
    methods: {
      //判断是否全屏
      isFullScreen() {
        return !!(document.webkitIsFullScreen || this.fullele());
      },
      fullele() {
        return (
          document.fullscreenElement ||
          document.webkitFullscreenElement ||
          document.msFullscreenElement ||
          document.mozFullScreenElement ||
          null
        );
      },
      screen() {
        let element = document.getElementById("screen");
        if (this.fullscreen) {
          // 关闭全屏
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        } else {
          // 全屏
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen();
          }
        }
        this.fullscreen = !this.fullscreen;
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .screen {
    // width: 500px;
    // background-color: #fff;
    // border: 1px solid red;
  }
  </style>
  